<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/auth.js"></script>
    <script src="../js/showDialog.js"></script>
</head>
<body>
    <h1>学生信息管理系统</h1>
    
    <div id="page">
      <!-- 学生 -->
      <div class="box" id="Student">
        <div class="list" id="list">
          <p>学生列表</p>
  
          <div class="tab" style="display: block;">
            <select id="searchStudentList">
              <option value="name">姓名</option>
              <option value="age">年龄</option>
              <option value="sex">性别</option>
            </select>
            <input type="text" id="search" />
            <input type="button" value="查询" id="search-btn"  />
            <table>
                <!-- 表格的头部 -->
              <thead>
                <tr>
                  <th>学号</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>性别</th>
                  <th>头像</th>
                  <th>班级</th>
                  <th>老师</th>
                  <th>操作</th>
                </tr>
              </thead>
              <!-- 表格的内容 -->

              <tbody>
                <!-- 动态 -->
                <!-- <tr>
                  <td>编号(_id)</td>
                  <td>张三</td>
                  <td>12</td>
                  <td>班级</td>
                  <td>
                    <img src="">
                  </td>
                  <td>老师</td>
                  <td>
                    <button data-id="67367436784678">修改</button>
                    <button data-id="67367436784678">删除</button>
                  </td>
                </tr> -->
              </tbody>
             
                   
            </table>
          </div>
        </div>
        <div class="add" id="addStudent">
          <p>添加学生</p>
          <div class="tab">
            <form action="">
              <div>
                <label for="sname">学生姓名</label>
                <input type="text" id="sname" />
              </div>   
              <div>
                <label for="age">年龄</label>
                <input type="number" id="age" />
              </div>
              <div>
                <select name="" id="addStudentClass">
                </select>
               </div>
              <div>
                <label for="sex">性别</label>
                <select name="" id="sex">
                  <option value="男">男</option>
                  <option value="女">女</option>
                  
                </select>
              </div>
              <!-- 图片 -->
              <div>
                <input type="file" id="addStudentImage" value="选择头像">
                <img src="" alt="" id="showAddStudentImage">
              </div>
            </form>
            <button id="addStudentBtn">添加</button>
          </div>
        </div>
        <div class="add" id="update">
          <p>修改学生</p>
          <div class="tab">
            <form action="">
              <div>
                <label for="sname">学生姓名</label>
                <input type="text" id="sname" />
              </div>
              <div>
                <label for="number">学号</label>
                <input type="text" id="number" disabled />
              </div>
             
              <div>
                <label for="age">年龄</label>
                <input type="number" id="age" />
              </div>
              <div>
                <label for="sex">性别</label>
                <select name="" id="sex">
                  <option value="男">男</option>
                  <option value="女">女</option>
                  
                </select>
              </div>
            </form>
            <button id="updateBtn">修改</button>
          </div>
        </div>
       
      </div>
      <!-- 班级 -->
      <div class="box" id="Class">
        <div class="list" id="list">
          <p>班级列表</p>
  
          <div class="tab" style="display: block;">
            <input type="text" id="search" />
            <input type="button" value="查询" id="search-btn"  />
            <table>
                <!-- 表格的头部 -->
              <thead>
                <tr>
                  <th>编号</th>
                  <th>名称</th>
                  <th>操作</th>
                </tr>
              </thead>
              <!-- 表格的内容 -->
              <tbody>
                <!-- 动态 -->
              </tbody>
             
                   
            </table>
          </div>
        </div>
        <div class="add" id="add">
          <p>添加班级</p>
          <div class="tab">
            <form action="">
              <div>
                <label for="cname">班级名称</label>
                <input type="text" id="cname" />
              </div>
              <div>
                <select name="" id="addClassTeacher">
                  <option value="">请选择班主任</option>
                </select>
              </div>
              
            </form>
            <button id="addClassBtn">添加</button>
          </div>
        </div>
        <div class="add" id="update">
          <p>修改班级</p>
          <div class="tab">
            <form action="">
              <div>
                <label for="sname">班级编号</label>
                <input type="text" id="sname" />
              </div>
              <div>
                <label for="cname">班级名称</label>
                <input type="number" id="cname" />
              </div>
              <div>
                <select name="" id="">
                  <option value="">请选择班主任</option>
                </select>
              </div>
            </form>
            <button id="updateBtn">修改</button>
          </div>
        </div>
       
      </div>
      <!-- 老师 -->
      <div class="box" id="Teacher">
        <div class="list" id="list">
          <p>老师列表</p>
  
          <div class="tab" style="display: block;">
            <input type="text" id="search" />
            <input type="button" value="查询" id="search-btn"  />
            <table>
                <!-- 表格的头部 -->
              <thead>
                <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>操作</th>
                </tr>
              </thead>
              <!-- 表格的内容 -->
              <tbody>
                <!-- 动态 -->
              </tbody>
             
                   
            </table>
          </div>
        </div>
        <div class="add" id="add">
          <p>添加老师</p>
          <div class="tab">
            <form action="">
              <div>
                <label for="sname">老师姓名</label>
                <input type="text" id="sname" />
              </div>
            </form>
            <button id="addBtn">添加</button>
          </div>
        </div>
        <div class="add" id="update">
          <p>修改老师</p>
          <div class="tab">
            <form action="">
              <div>
                <label for="number">编号</label>
                <input type="text" id="number" />
              </div>
              <div>
                <label for="sname">老师姓名</label>
                <input type="text" id="tname" />
              </div>
            </form>
            <button id="updateBtn">修改</button>
          </div>
        </div>
       
      </div>
    </div>
    <script>
      /*
      功能：利用mongoose实现数据库数据的渲染，包括学生、老师、班级集合。数据自行
      在Navicat进行填写。
      */
     // async&await
     function getPromise(url,type = 'get',data = null){
        return new Promise(function(success,reject){
          $.ajax({
            url,
            success,
            type,
            data
          })
        })
      }

      //获取所有数据并展示
      async function getAll(){
        let {students} = await getPromise('/students/');
        //班级数据
        let {classes} = await getPromise('/classes/');
        renderClassSelect(classes);
        renderStudents(students);
      }
      getAll();

      /*事件*/
      // 添加
      $('body').on('click','#Student #addStudentBtn',async function(){
        let name = $('#Student #addStudent #sname').val();
        let age = $('#Student #addStudent #age').val();
        let sex = $('#Student #addStudent #sex').val();
        let classId = $('#Student #addStudent #addStudentClass').val();
        let imgSrc = $('#Student #addStudent #showAddStudentImage').attr("src");
        let data = await getPromise('/students/','post',{name,age,sex,classId,imgSrc});
      })


      //修改标签页切换
      $('body').on('click','#Student .updateBtn',async function(){
        // 切换标签页，显示指定学生数据
        $("#Student .tab").hide();
        $('#Student #update .tab').show();

        // 获取_id 传给后端，获取数据  RESTful 
        let _id = $(this).attr('data-id');
        let {student} = await getPromise(`/students/${_id}`);
        console.log(student);
        //将数据放在页面上
        $('#Student #update #number').val(student._id);
        $('#Student #update #sname').val(student.name);
        $('#Student #update #age').val(student.age);
        $('#Student #update #sex').val(student.sex);
      });

      // 修改
      $('body').on('click',"#Student #updateBtn",async function(){
        let _id = $('#Student #update #number').val();
        let name = $('#Student #update #sname').val();
        let age = $('#Student #update #age').val();
        let sex = $('#Student #update #sex').val();
        let {message,code} =await getPromise('/students/','put',{_id,name,age,sex});
        // 弹窗提示
        showDialog(message,2000);
        //切换到列表同时更新数据
        let {students} = await getPromise('/students/');
        renderStudents(students);
        // 切换标签页
        $('#Student .tab').hide();
        $('#Student #list .tab').show();
      });


      //查询
      $('body').on('click','#Student #search-btn',async function(){
        let key = $('#searchStudentList').val();
        let value = $('#Student #search').val();
        let data = await getPromise('/students/searchStudents','post',{key,value})
        console.log(data);
      })


      //图片
      $('body').on('change','#addStudentImage',function(){
    //获取文件数据
    let file = this.files[0];
    //以表单数据方式将文件发送到后端
    let fd = new FormData();
    fd.append("file",file);
    //通过ajax发送到后端
    $.ajax({
        url:'/upload/image',
        success:function(data){
            $('#showAddStudentImage').attr('src',data.data);
        },
        data:fd,
        type:"post",
        //设置参数，防止jQuery自动处理,以便将文件数据原封不动的传给后端处理
        contentType: false,
        processData: false,
        cache: false,
    });
})

      /*渲染函数*/
      function renderStudents(students){
        let htmlStr ="";
        students.forEach(s => {
          htmlStr +=`
          <tr >
                        <td>${s._id}</td>
                        <td>${s.name}</td>
                        <td>${s.age}</td>
                        <td>${s.sex}</td>
                        <td>
                          <img src="${s.imgSrc}" width="50">
                        </td>
                        <td>${s.classId.name}</td>
                        <td>${s.classId.tid.name}</td>
                        <td><button data-id="${s._id}" class="updateBtn">修改</button><button class="delBtn" data-id="${s._id}">删除</button></td>
                    </tr>
          `;
        });
        $('#Student tbody').html(htmlStr);

        }

        function renderTeacherList(teachers){
        let htmlStr = "";
        teachers.forEach(t => {
        
          htmlStr +=`
          <tr>
            <td>${t.id}</td>
            <td>${t.tname}</td>
            <td><button data-id="${t.id}" class="updateBtn">修改</button><button class="delBtn" data-id="${t.id}">删除</button></td>
          </tr>
          `;
        });
        $('#Teacher #list tbody').html(htmlStr);
      }


        function renderClassList(classes){
            let htmlStr = "";
            classes.forEach(c => {
              //通过tid找到老师的名称
            // let teacher =  teachers.filter(t=>t.id==c.tid)[0];
              htmlStr +=`
              <tr>
                <td>${c._id}</td>
                <td>${c.name}</td>
                <td><button data-id="${c._id}" class="updateBtn">修改</button><button class="delBtn" data-id="${c._id}">删除</button></td>
              </tr>
              `;
            });
            $('#Class tbody').html(htmlStr);
          }

     function renderClassSelect(classes){
      let htmlStr = "";
            classes.forEach(c => {
              htmlStr +=`
             <option value="${c._id}">${c.name}</option>
              `;
            });
            $('#Student #addStudentClass').html(htmlStr);
     }
      
      






         //js 控制tab页面
      $('.box .list,.box .add').click(function(){
        let $tab = $(this).find('.tab');
        let $tabs = $(this).parents(".box").find('.tab');
        $tabs.hide();
        $tab.show();

      })
    </script>
   
</body>
</html>